<template>
    <!-- 商品版块组件 -->
    <div class="hot-content">
      <!-- 标题 -->
      <h1>{{ props.hotList.cat_name }}</h1>
      <div class="hot-goods">
        <!-- 调用商品组件 -->
        <Goods v-for="item in props.hotList.data" :goods="item" :key="item.goods_id"></Goods>
       
    </div>
    <!-- 点击跳转到小分类 -->
    <van-divider @click="router.push({path:'/classifysmall', 
      query: {
      catId: props.hotList.cat_id, 
      catName: props.hotList.cat_name,
      smallName: props.hotList.cat_name,
      }})">查看更多</van-divider>

   </div>
</template>
<script setup lang="ts">


    import {HotGoodsType} from './../types';
    
    let router = useRouter();

    //接收热门商品数据
    let props = defineProps<{
		hotList: HotGoodsType
	  }>();

</script>
<style scoped lang="less">
    .hot-content{
      margin: 30px 10px 10px;

      h1{
        font-size: 25px;
      }
    
    }
    
    .hot-goods{
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0px;
    }
    
</style>